<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <title>步骤进度条sample</title>

        <link rel="stylesheet" href="layui2.7.5/css/layui.css" />

        <style>
            body {
                padding: 100px 0;
            }
        </style>
    </head>
    <body>
        <div class="layui-container">
            <div id="stepProgressBar"></div>
            <div class="layui-btn-container">
                <div style="text-align: center; margin-top: 10px">
                    <button id="pre" class="layui-btn layui-btn-normal">Pre</button>
                    <button id="move" class="layui-btn layui-btn-normal">MoveTo</button>
                    <button id="next" class="layui-btn layui-btn-normal">Next</button>
                    <button id="reload" class="layui-btn layui-btn-normal">Reload</button>
                </div>
            </div>
        </div>

        <script src="layui2.7.5/layui.js"></script>
        <script>
            layui
                .config({
                    base: './stepprogress/'
                })
                .use(['stepprogress', 'layer'], function () {
                    var stepprogress = layui.stepprogress
                    var $ = layui.$
                    var layer = layui.layer

                    renderStepProgress()

                    $('#next').click(function () {
                        stepprogress.next('stepProgressBar')
                    })
                    $('#pre').click(function () {
                        stepprogress.pre('stepProgressBar')
                    })
                    $('#move').click(function () {
                        layer.prompt({ title: '输入想要移动到的目标位置，并确认', formType: 0 }, function (position, index) {
                            layer.close(index)
                            stepprogress.move('stepProgressBar', position)
                        })
                    })
                    $('#reload').click(function () {
                        stepprogress.reload('stepProgressBar', { position: 0 })
                    })

                    // 绑定进度变化事件
                    stepprogress.on('change(stepProgressBar)', function (options) {
                        console.log(options)
                    })

                    // 渲染步骤进度条
                    function renderStepProgress() {
                        let stepItems = [
                            {
                                title: '开始',
                                code: '01'
                            },
                            {
                                title: '做成基础数据',
                                code: '02'
                            },
                            {
                                title: '手工调整',
                                code: '03'
                            },
                            {
                                title: '生成报表',
                                code: '90'
                            }
                        ]
                        stepprogress.render({
                            elem: '#stepProgressBar',
                            stepItems: stepItems,
                            position: 0
                        })
                    }
                })
        </script>
    </body>
</html>
